<template>
	<div class="activeLoading">
		<h3>Loading 加载</h3>
		<div class="Loading1">
			<h4>区域加载</h4>
			<el-table :data="tableData" v-loading="loading" style="width:100%">
				<el-table-column label="日期" width="180" prop="date"></el-table-column>
				<el-table-column label="姓名" width="180" prop="name"></el-table-column>
				<el-table-column label="地址" width="180" prop="address"></el-table-column>
			</el-table>
		</div>
		<div class="Loading2">
			<h4>自定义</h4>
			<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">
				<el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
			</el-table>
		</div>
		
		<div class="Loading3">
			<h4>整页加载</h4>
			<!--<el-row :gutter="20">
				<el-col :span="12">
					<span>当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，</span>
					<span>可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。</span>
					<el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">指令方式</el-button>
				</el-col>
				<el-col :span="12">
					<el-button type="primary" @click="openFullScreen">服务方式</el-button>
				</el-col>
			</el-row>-->
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: 'true',
				fullscreenLoading:'false',
				tableData: [{
					name: '张三',
					date: '2018-5-22',
					address: '天津'
				}, {
					name: '张三',
					date: '2018-5-22',
					address: '天津'
				}, {
					name: '张三',
					date: '2018-5-22',
					address: '天津'
				}, {
					name: '张三',
					date: '2018-5-22',
					address: '天津'
				}, {
					name: '张三',
					date: '2018-5-22',
					address: '天津'
				}]
			}
		},
		methods:{
			/*openFullScreen(){
				this.fullscreenLoading  = true;
				setTimeout(()=>{
					this.fullscreenLoading = false;
				},2000)
			},
			openFullScreen2(){
				const loading = this.$loading({
					lock:true,
					text:'Loading',
					spinner:'el-icon-loading',
					background:'rgba(0,0,0,0.8)'
				});
				
				setTimeout(()=>{
					loading.close();
				},2000)
			}*/
		}
	}
</script>

<style>
	body {
		margin: 0;
	}
</style>